<template>
  <div class="material">
    <div class="header flex-row flex-justify-content-sb">
      <p class="header-title">{{adplateData.name}}</p>
      <el-button type="primary" @click="getMachine" v-if="!isCheck">
        添加投放设备
        <i class="el-icon-upload el-icon--right"></i>
      </el-button>
      <!-- <div v-else-if="isCheck && adplateData.stats == 0">
        <el-button type="success">通过审核</el-button>
        <el-button type="danger">驳回审核</el-button>
      </div> -->
    </div>
    <div class="material_content">
      <div class="content_a flex-row flex-justify-content-fs flex-align-items-fs">
        <div class="content_a_title">A区</div>
        <div class="sucai flex-row flex-align-items-c flex-wrap">
          <div v-for="(item,index) in adplateData.album_a" :key="index">
            <img
              :src="item.album"
              v-if="item.type=='png'||item.type == 'jpg' ||item.type == 'jpeg'"
              alt
            />
            <video :src="item.album" v-else controls="controls"></video>
          </div>
        </div>
      </div>
      <div class="content_b flex-row flex-justify-content-fs flex-align-items-fs">
        <div class="content_b_title">B区</div>
        <div class="sucai flex-row flex-align-items-c flex-wrap">
          <div v-for="(item,index) in adplateData.album_b" :key="index">
            <img :src="item.album" alt />
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="选择投放设备"
      :visible.sync="centerDialogVisible"
      width="60%"
      center
      @close="dialogHide"
    >
      <div class="flex-row flex-justify-content-c">
        <el-transfer
          v-model="value"
          :data="machineData"
          :button-texts="['取消', '选择']"
          :titles="['可投放设备','已选择的设备']"
        ></el-transfer>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="upServing">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {},
  data () {
    return {
      // adId: this.$route.query.id,
      adplateData: {},
      centerDialogVisible: false,
      machineData: [],
      value: []
      // isCheck:false
    }
  },
  computed: {
    adId () {
      if (this.$route.query.id) {
        return this.$route.query.id
      } else {
        this.$message({
          message: '请选择模板！',
          type: 'warning'
        })
        this.$router.push({
          path: 'advertising'
        })
      }
    },
    isCheck () {
      if (this.$route.query.isCheck) {
        return this.$route.query.isCheck
      }
    }
  },
  created () {
    this.adId ? this.getAdplate() : '';
  },
  mounted () {},
  watch: {},
  methods: {
    getAdplate () {
      let code = `advertiser_id=${
        JSON.parse(sessionStorage.getItem('userinfo')).id
      }&adplate_id=${this.adId}`
      let RASCODE = this.$getCode(code)
      this.http
        .getAdplate({
          secret: RASCODE
        })
        .then(res => {
          console.log(res)
          if (res.data.errno == '000') {
            this.adplateData = res.data.result
          } else {
            this.$message({
              message: res.data.errmsg,
              type: 'warning'
            })
          }
        })
        .catch(err => {})
    },
    getMachine () {
      this.machineData = []
      let code = `advertiser_id=${
        JSON.parse(sessionStorage.getItem('userinfo')).id
      }&adplate_id=${this.adId}`
      let RASCODE = this.$getCode(code)
      this.http
        .getMachine({
          secret: RASCODE
        })
        .then(res => {
          console.log(res)
          if (res.data.errno == '000') {
            // this.machineData = res.data.result.data
            res.data.result.data.forEach((element, index) => {
              this.machineData.push({
                key: element.machine_id,
                label: element.name,
                disabled: element.stats !== '可投放'
              })
            })
            this.centerDialogVisible = true
          } else {
            this.$message.error({
              message: res.data.errmsg
            })
          }
        })
        .catch(err => {})
    },
    dialogHide () {
      this.machineData = []
      this.value = []
    },
    upServing () {
      console.log(this.value)
      if (this.value.length) {
        let valueStr = '';
        this.value.forEach((element, index) => {
          valueStr +=
            this.value.length > 1 && index + 1 < this.value.length
              ? element + ','
              : element
        })
        let code = `advertiser_id=${
          JSON.parse(sessionStorage.getItem('userinfo')).id
        }&adplate_id=${this.adId}&machine_id=${valueStr}`
        console.log(code)
        let RASCODE = this.$getCode(code)
        this.http
          .putAdvertiser({ secret: RASCODE })
          .then(res => {
            if (res.data.errno == '000') {
              this.$message({
                message: '投放成功',
                type: 'success'
              })
              this.value = []
              this.getMachine()
            } else {
              this.$message.error({
                message: res.data.errmsg
              })
            }
          })
          .catch(err => {})
      } else {
        this.$message.error({
          message: '请选择需要投放的设备'
        })
      }
    }
  },
  components: {}
}
</script>

<style scoped lang="less">
@import url("./index.less");
</style>
